<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <input type="text" v-model="num1">
    <input type="text" v-model="num2">
    <button @click="f(1)">加</button>
    <button @click="f(2)">减</button>
    <button @click="f(3)">乘</button>
    <button @click="f(4)">除</button>
    <h1>结果：{{result}}</h1>
</div>
<script src="../js/vue.js"></script>
<script>
    let v = new Vue({
        el:"body>div",
        data() {
            return {
                result: "",
                num1:"",
                num2:"",
            }
        },
        methods: {
            f(x) {
               if(isNaN(v.num1)||isNaN(v.num2)){
                   v.result = "输入错误，请输入数字";
                   return;
               }
               switch (x){
                   case 1:
                       v.result = parseFloat(v.num1)+parseFloat(v.num2);
                       break;
                   case 2:
                       v.result = v.num1-v.num2;
                       break;
                   case 3:
                       v.result = v.num1*v.num2;
                       break;
                   case 4:
                       v.result = v.num1/v.num2;
                       break;
               }
            }
        },
    })
</script>
</body>
</html>